<template>
  <div class="dropdown" ref="dropdownRef">
    <button @click.prevent="toggleOpen" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      你好 {{title}}
    </button>
    <ul v-if="isOpen" class="dropdown-menu" style="display: block">
      <slot></slot>
    </ul>
  </div>
</template>
<script  lang="ts">

import {defineComponent,watch, onMounted, onUnmounted, PropType, ref} from "vue";
import useClickOutside from "@/hooks/useClickOutside";

export default defineComponent({
  name:'Dropdown',
  props:{
   title:{
     type:String,
     required:true
   }
  },
  setup(props){
    const isOpen  = ref(false)
    const dropdownRef = ref<null|HTMLElement>(null)


    let toggleOpen = () =>{
      isOpen.value = !isOpen.value
    }
    const  isClickOutside = useClickOutside(dropdownRef)

    watch(isClickOutside,()=>{
      if (isOpen.value && isClickOutside.value) {
        isOpen.value =false
      }
    })
    return{
      isOpen,
      toggleOpen,
      dropdownRef,
    }
  }
})
</script>
